<template>
    <div class="layout">
        <!-- 侧边栏 -->
        <Sider class="layout-sider" :state = siderState></Sider>
        <!-- 内容 -->
        <div class="layout-main">
            <!-- 内容头部 -->
            <Header class="header" @siderShow = siderClick></Header>
            <!-- 内容主体 -->
            <router-view class="content"/>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue';
import Sider from './Sider.vue'
import Header from './Header.vue'

let siderState = ref(false);
const siderClick = (e) => {
    siderState = e
}

// export default {
//     name: 'Home',
//     data () {
//         return {

//         }
//     },
//     setup () {
//         let siderState = false;
//         const siderClick = (e) => {
//             siderState = e
//         }
//         return{
//             siderState,
//             siderClick
//         }
//     },
//     components: {
//         Sider,
//         Header
//     },
// }
</script>

<style>
.layout{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}
.layout-sider{
    flex: 0 0 230px;
    max-width: 230px;
    min-width: 230px;
    width: 230px;
    height: 100%;
    background-color: #001529;
    /* transition: all 0.2s ease 0s; */
}
.layout-main{
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background-color: #f0f2f5;
}
.layout-main .header{
    flex: 0 0 auto;
    height: 52px;
    background-color: #fff;
}
.layout-main .content{
    position: relative;
    flex: 1 1 auto;
    min-height: 0px;
    margin: 10px;
}
</style>